<div *ngIf="stepExecutionDetails$ | async as stepExecutionDetails; else loading">

  <div class="heading">
    <div class="description">
      <h1>
        Step Execution <strong>{{ stepExecutionDetails.stepExecution.stepExecution.name }}</strong>
        ({{ stepExecutionDetails.stepExecution.stepExecution.id }})
      </h1>
      <h2>
        Job execution <strong>{{ stepExecutionDetails.jobExecution.name }}</strong>
        ({{ stepExecutionDetails.jobExecution.jobExecutionId }})
      </h2>
    </div>
    <div class="actions">
      <button id="refresh" class="btn btn-default" (click)="refresh()">
        <span class="glyphicon glyphicon-refresh"></span>
      </button>
      <button id="stats" class="btn btn-primary" title="Details"
              (click)="viewStepExecutionProgress(stepExecutionDetails.stepExecution)">
        More details
      </button>
    </div>
  </div>

  <hr>

  <div *ngIf="stepExecutionDetails.stepExecutionProgress.percentageComplete < 1">
    <h4>Step Execution Progress</h4>
    <progressbar [animate]="false" max="100"
                 [value]="stepExecutionDetails.stepExecutionProgress.percentageComplete * 100"
                 type="success">
      <b>{{ stepExecutionDetails.stepExecutionProgress.percentageComplete * 100}}%</b>
    </progressbar>
  </div>

  <div>
    <h4>Step Execution</h4>
    <div id="nostepexecution" *ngIf="!stepExecutionDetails?.stepExecution.stepExecution">
      No Step Execution available.
    </div>

    <table id="stepExecution" *ngIf="stepExecutionDetails?.stepExecution?.stepExecution" class="table table-hover">
      <thead>
      <tr>
        <th style="width: 250px">Property</th>
        <th>Value</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Step Execution Id</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.id }}</td>
      </tr>
      <tr>
        <td>Job Execution Id</td>
        <td>{{ stepExecutionDetails.stepExecution.jobExecutionId }}</td>
      </tr>
      <tr>
        <td>Step Name</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.name }}</td>
      </tr>
      <tr>
        <td>Step Type</td>
        <td>{{ stepExecutionDetails.stepExecution.stepType }}</td>
      </tr>
      <tr>
        <td>Status</td>
        <td>
          <app-job-execution-status
            [status]="stepExecutionDetails.stepExecution.stepExecution.status"></app-job-execution-status>
        </td>
      </tr>
      <tr>
        <td>Commits</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.commitCount }}</td>
      </tr>
      <tr>
        <td>Duration</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.startTime | dataflowDuration:
          stepExecutionDetails.stepExecution.stepExecution.endTime }}
        </td>
      </tr>
      <tr>
        <td>Filter Count</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.filterCount }}</td>
      </tr>
      <tr>
        <td>Process Skips</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.processSkipCount }}</td>
      </tr>
      <tr>
        <td>Reads</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.readCount }}</td>
      </tr>
      <tr>
        <td>Read Skips</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.readSkipCount }}</td>
      </tr>
      <tr>
        <td>Rollbacks</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.rollbackCount }}</td>
      </tr>
      <tr>
        <td>Skips</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.skipCount }}</td>
      </tr>
      <tr>
        <td>Writes</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.writeCount }}</td>
      </tr>
      <tr>
        <td>Write Skips</td>
        <td>{{ stepExecutionDetails.stepExecution.stepExecution.writeSkipCount }}</td>
      </tr>
      </tbody>
    </table>
  </div>

  <div *ngIf="stepExecutionDetails?.stepExecution?.stepExecution?.exitMessage">
    <h4>Exit Description</h4>
    <pre class="exit">{{ stepExecutionDetails?.stepExecution?.stepExecution?.exitMessage || 'N/A' }}</pre>
  </div>

  <div *ngIf="stepExecutionDetails?.stepExecution?.stepExecution?.executionContext?.values">
    <h4>Step Execution Context</h4>
    <table id="stepExecutionContext" class="table table-hover">
      <thead>
      <tr>
        <th style="width: 250px">Key</th>
        <th>Value</th>
      </tr>
      </thead>
      <tbody>
      <ng-template ngFor let-item
                   [ngForOf]="stepExecutionDetails.stepExecution.stepExecution.executionContext.values | mapValuesPipe">
        <tr>
          <td>{{ item.key }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </ng-template>
      </tbody>
    </table>
  </div>

  <div style="text-align: center;padding-top: 10px;">
    <button id="back" class="btn btn-default" (click)="back(stepExecutionDetails.stepExecution.jobExecutionId)">
      Back
    </button>
  </div>

</div>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>

